<script lang="ts" setup>
import AddOrUpdate from './components/AddOrUpdate.vue'
import SysLayout from '@/components/SysLayout.vue'
import { ElButton, ElInput, ElPagination, ElSpace, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { useCategoriesStore } from './store'
import { useWindowSize } from '@vueuse/core'
import { computed } from 'vue'

const categories = useCategoriesStore()

const { height } = useWindowSize()

const tableHeight = computed(() => height.value - 337)

categories.onGet()

const onSelectionChange = (val: any) => (categories.selection = val)
</script>

<template>
  <SysLayout>
    <template #filter>
      <ElInput v-model="categories.search" prefix-icon="Search" />
      <ElButton icon="Search" type="primary" @click="categories.onSearch">搜索</ElButton>
      <ElButton icon="RefreshRight" plain @click="categories.onResetSearch">重置</ElButton>
    </template>
    <template #action>
      <ElButton type="primary" icon="Plus" @click="categories.onInitForm()">新增分类</ElButton>
      <ElButton
        icon="Delete"
        type="danger"
        plain
        :disabled="categories.selection.length === 0"
        @click="categories.onBatchDelete"
      >
        批量删除
      </ElButton>
    </template>
    <template #default>
      <ElTable
        border
        :data="categories.items"
        :height="tableHeight"
        show-overflow-tooltip
        @selection-change="onSelectionChange"
      >
        <ElTableColumn type="selection" width="38" align="center" />
        <ElTableColumn prop="name" label="名称" align="center" />
        <ElTableColumn prop="tagNameList" label="所属标签" align="center" #="{ row }">
          <ElSpace>
            <ElTag type="primary" v-for="(cell, key) of row.tagNameList" :key>
              {{ cell }}
            </ElTag>
          </ElSpace>
        </ElTableColumn>
        <ElTableColumn prop="description" label="描述" align="start" header-align="center" />
        <ElTableColumn prop="updatedAt" label="更新时间" align="center" />
        <ElTableColumn prop="createdAt" label="创建时间" align="center" />
        <ElTableColumn label="操作" align="center" fixed="right" width="150" #="{ row }">
          <ElButton type="primary" link @click="categories.onInitForm(row)">修改</ElButton>
          <ElButton type="danger" link @click="categories.onDelete(row)">删除</ElButton>
        </ElTableColumn>
      </ElTable>
      <ElPagination
        v-model:current-page="categories.current"
        layout="prev, pager, next, jumper"
        :total="categories.total"
        @current-change="categories.onGet"
      />
    </template>
  </SysLayout>
  <AddOrUpdate />
</template>
